<template>
  <div class="home">
    <div class="home-left">
      <div class="home-left__head">
        <div class="home-left__head__device">
          <div class="home-card-item">
            <div class="title deviceTitle">设备概况</div>
            <div class="deviceNum">
              <div class="deviceNumBox">
                <div class="boxtop">
                  <span class="c1">{{
                    deviceObj.totalCount ? deviceObj.totalCount : 0
                  }}</span
                  >台
                </div>
                <div class="boxmsg">设备总数</div>
              </div>
              <div class="deviceNumBox">
                <div class="boxtop">
                  <span class="c2">{{
                    deviceObj.repairCount ? deviceObj.repairCount : 0
                  }}</span
                  >台
                </div>
                <div class="boxmsg">维修中设备</div>
              </div>
              <div class="deviceNumBox">
                <div class="boxtop">
                  <span class="c3">{{
                    deviceObj.maintainCount ? deviceObj.maintainCount : 0
                  }}</span
                  >台
                </div>
                <div class="boxmsg">维保中设备</div>
              </div>
              <div class="deviceNumBox">
                <div class="boxtop">
                  <span class="c4">{{
                    deviceObj.checkCount ? deviceObj.checkCount : 0
                  }}</span
                  >台
                </div>
                <div class="boxmsg">点检中设备</div>
              </div>
              <div class="deviceNumBox">
                <div class="boxtop">
                  <span class="c5">{{
                    deviceObj.stopCount ? deviceObj.stopCount : 0
                  }}</span
                  >台
                </div>
                <div class="boxmsg">停用设备</div>
              </div>
            </div>
          </div>
        </div>
        <div class="home-left__head__part">
          <div class="home-card-item">
            <div class="title partTitle">备件库概况</div>
            <div class="partNum">
              <div class="partNumBox">
                <div class="boxtop">
                  <span class="c1">{{
                    partObj.partNum ? partObj.partNum : 0
                  }}</span>
                </div>
                <div class="boxmsg">备件库总数</div>
              </div>
              <div class="partNumBox">
                <div class="boxtop">
                  <span class="c2">{{
                    partObj.applyNum ? partObj.applyNum : 0
                  }}</span>
                </div>
                <div class="boxmsg">备件申请待审核数</div>
              </div>
              <div class="partNumBox">
                <div class="boxtop">
                  <span class="c2">{{
                    partObj.refundNum ? partObj.refundNum : 0
                  }}</span>
                </div>
                <div class="boxmsg">备件退还待审核数</div>
              </div>
              <div class="partNumBox">
                <div class="boxtop">
                  <span class="c3">{{
                    partObj.safeNum ? partObj.safeNum : 0
                  }}</span>
                </div>
                <div class="boxmsg">备件预警数</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home-left__echarts">
        <div class="home-card-item">
          <div class="title">设备故障统计（年度）</div>
          <div style="width: 100%; height: 300px" id="hitchId"></div>
        </div>
      </div>
      <div class="home-left__table">
        <div class="home-card-item">
          <div class="tableHead">
            <div style="display: flex">
              <div class="title" style="margin-right: 24px">
                设备故障前十统计表
              </div>
              <el-button-group>
                <el-button
                  type="primary"
                  :plain="dateBtnBool == 2"
                  @click="getTableData('time', true)"
                  >月度统计</el-button
                >
                <el-button
                  type="primary"
                  :plain="dateBtnBool == 1"
                  @click="getTableData('year', true)"
                  >年度统计</el-button
                >
              </el-button-group>
            </div>
            <div>
              <el-date-picker
                v-if="selectType == 'time'"
                v-model="params.time"
                type="month"
                placeholder="选择月份"
                value-format="YYYY-MM"
                @change="changeMonth"
              />
              <el-date-picker
                v-if="selectType == 'year'"
                v-model="params.year"
                type="year"
                placeholder="选择年份"
                value-format="YYYY"
                @change="changeYear"
              />
            </div>
          </div>
          <el-table
            :data="tableData"
            border
            style="width: 100%; height: 342px; overflow: scroll"
            :default-sort="{ prop: 'repairCount' }"
          >
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="deviceNum" label="设备编号" width="160" />
            <el-table-column prop="deviceName" label="设备名称" />
            <el-table-column prop="modelName" label="设备型号" />
            <el-table-column prop="deptName" label="所在部门" />
            <el-table-column prop="repairCount" label="维修次数" />
            <el-table-column prop="totalAmount" label="关联备件数量" />
            <el-table-column
              prop="totalMoney"
              label="关联备件金额"
              sortable
              width="160"
            />
            <template #empty>
              <img
                v-if="themeConfig.primary == '#02AD82'"
                src="../../assets/noData.png"
                alt=""
              />
              <img
                v-else-if="themeConfig.primary == '#063C74'"
                src="../../assets/noData3.png"
                alt=""
              />
              <img
                v-else="themeConfig.primary == '#514FC2'"
                src="../../assets/noData2.png"
                alt=""
              />
            </template>
          </el-table>
        </div>
      </div>
    </div>
    <div class="home-right">
      <div class="home-right__list">
        <div class="home-card-item">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane
              :label="'待维修工单(' + weixiuList.length + ')'"
              name="weixiu"
            >
              <div class="wxTab" v-if="weixiuList.length != 0">
                <div class="weixiuList" v-for="item in weixiuList">
                  <div class="listTitle">
                    <div style="font-weight: 600">
                      {{ item.deviceNum + '_' + item.deviceName }}
                    </div>
                    <div class="titleType">
                      {{ item.repairType == 1 ? '内部维修' : '外部维修' }}
                    </div>
                  </div>
                  <div class="listRow">
                    <div>维修工单号</div>
                    <div>故障类型</div>
                  </div>
                  <div class="listRow2">
                    <div>{{ item.repairOrderNum }}</div>
                    <div>{{ item.failureCategory }}</div>
                  </div>
                  <div class="listRow">
                    <div>故障名称</div>
                    <div>故障描述</div>
                  </div>
                  <div class="listRow2">
                    <div>
                      {{ item.failurePhenomenon }}
                    </div>
                    <div>
                      <el-tooltip
                        popper-class="tool-tip"
                        v-if="item.description.length > 13"
                        class="box-item"
                        effect="dark"
                        :content="item.description"
                        placement="top"
                      >
                        <span>{{ item.description }}</span>
                      </el-tooltip>
                      <span v-else>{{ item.description }}</span>
                    </div>
                  </div>
                  <div class="listRow">
                    <div>维修人</div>
                    <div>报修时间</div>
                  </div>
                  <div class="listRow2">
                    <div>{{ item.repairUserName }}</div>
                    <div>{{ item.createTime }}</div>
                  </div>
                </div>
              </div>
              <div v-else class="noData">
                <div>
                  <img
                    v-if="themeConfig.primary == '#02AD82'"
                    src="../../assets/noData.png"
                    alt=""
                  />
                  <img
                    v-else-if="themeConfig.primary == '#063C74'"
                    src="../../assets/noData3.png"
                    alt=""
                  />
                  <img
                    v-else="themeConfig.primary == '#514FC2'"
                    src="../../assets/noData2.png"
                    alt=""
                  />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane
              :label="'待维保任务(' + webList.length + ')'"
              name="weibao"
            >
              <div class="wxTab" v-if="webList.length != 0">
                <div class="weixiuList" v-for="item in webList">
                  <div class="listTitle">
                    <div style="font-weight: 600">
                      {{ item.deviceNum + '_' + item.deviceName }}
                    </div>
                    <div class="titleType">
                      {{
                        item.maintainStatus == 0
                          ? '待执行'
                          : item.maintainStatus == 1
                          ? '执行中'
                          : item.maintainStatus == 2
                          ? '执行完成'
                          : item.maintainStatus == 9
                          ? '取消'
                          : ''
                      }}
                    </div>
                  </div>
                  <div class="listRow">
                    <div>维保工单号</div>
                    <div>计划类型</div>
                  </div>
                  <div class="listRow2">
                    <div>{{ item.taskOrderNum }}</div>
                    <div>
                      {{
                        item.planType == 1
                          ? '单次维保'
                          : item.planType == 2
                          ? '周期维保'
                          : ''
                      }}
                    </div>
                  </div>
                  <div class="listRow">
                    <div>维保周期</div>
                    <div>维保类型</div>
                  </div>
                  <div class="listRow2">
                    <div>{{ item.period + item.periodUnit }}</div>
                    <div>{{ item.maintainTypeName }}</div>
                  </div>
                  <div class="listRow">
                    <div>维保人</div>
                    <div v-if="item.maintainStatus == 0">计划维保时间</div>
                    <div v-if="item.maintainStatus != 0">实际维保时间</div>
                  </div>
                  <div class="listRow2">
                    <div>{{ item.maintainUserName }}</div>
                    <div v-if="item.maintainStatus == 0">
                      {{ item.planBeginDate }}
                    </div>
                    <div v-if="item.maintainStatus != 0">
                      {{ item.factBeginDate }}
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="noData">
                <div>
                  <img
                    v-if="themeConfig.primary == '#02AD82'"
                    src="../../assets/noData.png"
                    alt=""
                  />
                  <img
                    v-else-if="themeConfig.primary == '#063C74'"
                    src="../../assets/noData3.png"
                    alt=""
                  />
                  <img
                    v-else="themeConfig.primary == '#514FC2'"
                    src="../../assets/noData2.png"
                    alt=""
                  />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane
              :label="'待点检任务(' + dianList.length + ')'"
              name="dianjian"
            >
              <div class="wxTab" v-if="dianList.length != 0">
                <div class="weixiuList" v-for="item in dianList">
                  <div class="listTitle">
                    <div style="font-weight: 600">
                      {{ item.deviceNum + '_' + item.deviceName }}
                    </div>
                    <div class="titleType">
                      {{
                        item.checkStatus == 0
                          ? '待点检'
                          : item.checkStatus == 1
                          ? '点检中'
                          : item.checkStatus == 2
                          ? '点检完成'
                          : item.checkStatus == 9
                          ? '取消'
                          : ''
                      }}
                    </div>
                  </div>
                  <div class="listRow">
                    <div>点检工单号</div>
                    <div>计划类型</div>
                  </div>
                  <div class="listRow2">
                    <div>{{ item.taskOrderNum }}</div>
                    <div>
                      {{
                        item.planType == 1
                          ? '单次点检'
                          : item.planType == 2
                          ? '周期点检'
                          : ''
                      }}
                    </div>
                  </div>
                  <div class="listRow">
                    <div>点检周期</div>
                    <div>点检类型</div>
                  </div>
                  <div class="listRow2">
                    <div>{{ item.period + item.periodUnit }}</div>
                    <div>{{ item.checkTypeName }}</div>
                  </div>
                  <div class="listRow">
                    <div>点检人</div>
                    <div v-if="item.checkStatus == 0">计划点检时间</div>
                    <div v-if="item.checkStatus != 0">实际点检时间</div>
                  </div>
                  <div class="listRow2">
                    <div>{{ item.checkUserName }}</div>
                    <div v-if="item.checkStatus == 0">
                      {{ item.planBeginDate }}
                    </div>
                    <div v-else>
                      {{ item.factBeginDate }}
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="noData">
                <div>
                  <img
                    v-if="themeConfig.primary == '#02AD82'"
                    src="../../assets/noData.png"
                    alt=""
                  />
                  <img
                    v-else-if="themeConfig.primary == '#063C74'"
                    src="../../assets/noData3.png"
                    alt=""
                  />
                  <img
                    v-else="themeConfig.primary == '#514FC2'"
                    src="../../assets/noData2.png"
                    alt=""
                  />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="home-right__pie">
        <div class="home-card-item">
          <div class="pie-btn">
            <el-select
              v-model="proportionType"
              class="m-2"
              @change="changeType"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div>
              <!-- <el-button-group> -->
              <el-button
                type="primary"
                :plain="btnBool == 1"
                @click="selectMonth(2, proportionType)"
                >上一月</el-button
              >
              <el-button
                type="primary"
                :plain="btnBool == 2"
                @click="selectMonth(1, proportionType)"
                >本月</el-button
              >
              <!-- </el-button-group> -->
            </div>
          </div>
          <div
            v-if="proportionType == 1"
            style="width: 100%; height: 350px"
            id="pie1"
          ></div>
          <div
            v-if="proportionType == 2 || proportionType == 3"
            style="width: 100%; height: 350px"
            id="pie2"
          ></div>
        </div>
      </div>
    </div>
    <PartWarning :warningDialog="warningDialog"></PartWarning>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, defineAsyncComponent } from 'vue'
import {
  checkTypeProportionApi,
  deviceFaultCensusByMonthApi,
  getDeviceCountByStatusApi,
  getDeviceFailureListApi,
  maintainTypeProportionApi,
  partStatisticsApi,
  pieChartCensusApi,
  selectNotRepairListApi,
  webPageCheckListApi,
  webPageListApi,
  getUntreatedPartApi
} from '/@/api/home'
import * as echarts from 'echarts'
import router from '/@/router'
import { storeToRefs } from 'pinia'
import { useThemeConfig } from '/@/stores/themeConfig'
const storesThemeConfig = useThemeConfig()
const { themeConfig } = storeToRefs(storesThemeConfig)
const PartWarning = defineAsyncComponent(
  () => import('/@/views/home/components/PartWarning.vue')
)
const deviceObj = ref<any>({})
const partObj = ref<any>({})
const partObj2 = ref<any>({})
const btnBool = ref<any>(1)
const dateBtnBool = ref<any>(1)
const getDevice = () => {
  getDeviceCountByStatusApi().then((res) => {
    if (res.code == 0) {
      deviceObj.value = res.data
    }
  })
}
const getPart = () => {
  partStatisticsApi().then((res) => {
    if (res.code == 0) {
      partObj.value = res.data
    }
  })
}

const getUntreatedPart = () => {
  getUntreatedPartApi().then((res) => {
    if (res.code == 0) {
      partObj2.value = res.data
    }
  })
}

//跳转在用设备管理页面
const goDevice = (val: any) => {
  router.push({
    name: 'assetsEquipment',
    query: {
      status: val
    }
  })
}

//跳转备件管理页面
const goPart = (val: any) => {
  router.push({
    name: val
  })
}

const months = ref<any>([])
const regularCounts = ref<any>([])
const deviceCount = ref<any>(false)
const deviceCounts = ref<any>([])
const maintainCounts = ref<any>([])
const checkCounts = ref<any>([])
const getDeviceFaultCensusByMonth = () => {
  deviceFaultCensusByMonthApi().then((res) => {
    if (res.code == 0) {
      res.data.forEach((item: any) => {
        let m = item.month + '月'
        months.value.push(m)
        regularCounts.value.push(item.regularCount)
        deviceCounts.value.push(item.deviceCount)
        maintainCounts.value.push(item.maintainCount)
        checkCounts.value.push(item.checkCount)
      })
      deviceCount.value = regularCounts.value.every((item: any) => item === 0)
      if (!deviceCount.value) {
        hitchEchartsInit()
        return
      }
      deviceCount.value = deviceCounts.value.every((item: any) => item === 0)
      if (!deviceCount.value) {
        hitchEchartsInit()
        return
      }
      deviceCount.value = maintainCounts.value.every((item: any) => item === 0)
      if (!deviceCount.value) {
        hitchEchartsInit()
        return
      }
      deviceCount.value = checkCounts.value.every((item: any) => item === 0)
      hitchEchartsInit()
    }
  })
}

const hitchEchartsInit = () => {
  var chartDom = document.getElementById('hitchId')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true
        }
      }
    },
    calculable: true,
    legend: {
      data: ['设备故障数量', '报修故障', '维保故障', '点检故障'],
      itemGap: 3,
      right: '5%',
      icon: 'rect',
      itemHeight: 16,
      itemWidth: 16,
      textStyle: {
        fontSize: 14, //图例文字字体大小
        color: '#212121' //图例文字颜色
      }
    },
    grid: {
      top: '15%',
      left: '5%',
      right: '5%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: '月份',
        data: months.value
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        minInterval: 2,
        min: deviceCount.value ? 10 : 0
      }
    ],
    series: [
      {
        name: '设备故障数量',
        type: 'bar',
        data: deviceCounts.value,
        itemStyle: {
          color: '#02AD82'
        }
      },
      {
        name: '报修故障',
        type: 'bar',
        data: deviceCounts.value,
        itemStyle: {
          color: '#FAB70F'
        }
      },
      {
        name: '维保故障',
        type: 'bar',
        data: maintainCounts.value,
        itemStyle: {
          color: '#1962E0'
        }
      },
      {
        name: '点检故障',
        type: 'bar',
        data: checkCounts.value,
        itemStyle: {
          color: '#FC8B2D'
        }
      }
    ]
  }
  myChart.setOption(option)
}

const selectType = ref('time')
const tableData = ref<any>([])
const params = ref<any>({
  time: '',
  year: '',
  sortType: ''
})
const getTableData = (val: any, bol: any) => {
  let param
  if (val == 'time') {
    dateBtnBool.value = 1
    if (bol) {
      getMonth()
    }
    params.value.year = ''
    selectType.value = 'time'
    param = {
      sortType: params.value.sortType,
      time: params.value.time
    }
  } else if (val == 'year') {
    dateBtnBool.value = 2
    if (bol) {
      getYear()
    }
    params.value.time = ''
    selectType.value = 'year'
    param = {
      sortType: params.value.sortType,
      year: parseInt(params.value.year)
    }
  }
  getDeviceFailureListApi(param).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data
    }
  })
}

const getMonth = () => {
  let data = new Date()
  let month = data.getMonth() + 1
  let m = '0' + month
  params.value.time = data.getFullYear() + '-' + m
}

const getYear = () => {
  var year = new Date().getFullYear() + ''
  params.value.year = year
}

const changeYear = (val: any) => {
  params.value.year = val
  getTableData('year', false)
}

const changeMonth = (val: any) => {
  params.value.time = val
  getTableData('time', false)
}

const activeName = ref('weixiu')
const handleClick = () => {}
const weixiuList = ref<any>([])
const getSelectNotRepairList = () => {
  selectNotRepairListApi().then((res) => {
    if (res.code == 0) {
      weixiuList.value = res.data
    }
  })
}

const webList = ref<any>([])
const webPageList = () => {
  webPageListApi().then((res) => {
    if (res.code == 0) {
      webList.value = res.data
    }
  })
}

const dianList = ref<any>([])
const webPageCheckList = () => {
  webPageCheckListApi().then((res) => {
    if (res.code == 0) {
      dianList.value = res.data
    }
  })
}

const proportionType = ref(1)
const options = ref([
  {
    label: '维修来源占比',
    value: 1
  },
  {
    label: '维保类型占比',
    value: 2
  },
  {
    label: '点检类型占比',
    value: 3
  }
])

const proportionData = ref<any>({})
const maintainTypeData = ref<any>([])
const changeType = (val: any) => {
  if (btnBool.value == 1) {
    if (val == 1) {
      pieChartCensus(1)
    } else if (val == 2) {
      maintainTypeProportion(1, 2)
    } else if (val == 3) {
      maintainTypeProportion(1, 3)
    }
  } else {
    if (val == 1) {
      pieChartCensus(2)
    } else if (val == 2) {
      maintainTypeProportion(2, 2)
    } else if (val == 3) {
      maintainTypeProportion(2, 3)
    }
  }
}

const selectMonth = (month: any, type: any) => {
  if (month == 1) {
    btnBool.value = 1
    if (type == 1) {
      pieChartCensus(1)
    } else if (type == 2) {
      maintainTypeProportion(1, 2)
    } else {
      maintainTypeProportion(1, 3)
    }
  } else if (month == 2) {
    btnBool.value = 2
    if (type == 1) {
      pieChartCensus(2)
    } else if (type == 2) {
      maintainTypeProportion(2, 2)
    } else {
      maintainTypeProportion(2, 3)
    }
  }
}

const pieEchartsInit = () => {
  var chartDom = document.getElementById('pie1')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      itemGap: 3,
      right: '1%',
      bottom: '1%',
      icon: 'rect',
      itemHeight: 16,
      itemWidth: 16,
      textStyle: {
        fontSize: 14, //图例文字字体大小
        color: '#212121' //图例文字颜色
      }
    },
    series: [
      {
        name: '维修来源占比',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: proportionData.value.regularCount, name: '正常报修' },
          { value: proportionData.value.maintainCount, name: '维保报修' },
          { value: proportionData.value.checkCount, name: '点检报修' }
        ]
      }
    ]
  }
  myChart.setOption(option)
}

const pieEchartsInit2 = () => {
  var chartDom = document.getElementById('pie2')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        let str = `<div>${params.name}:${params.value}(${params.data.proportion})</div>` // 设置显示内容
        return str
        // console.log(params);
      }
    },
    legend: {
      itemGap: 3,
      right: '1%',
      bottom: '1%',
      icon: 'rect',
      itemHeight: 16,
      itemWidth: 16,
      textStyle: {
        fontSize: 14, //图例文字字体大小
        color: '#212121' //图例文字颜色
      }
    },
    series: [
      {
        name:
          proportionType.value == 2
            ? '维保类型占比'
            : proportionType.value == 3
            ? '点检类型占比'
            : '',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: maintainTypeData.value
      }
    ]
  }
  myChart.setOption(option)
}

//val为1:本月 ,2:上一月
const pieChartCensus = (val: any) => {
  let data = new Date()
  let month
  let m = ''
  if (val == 1) {
    month = data.getMonth() + 1
    m = '0' + month
  } else if (val == 2) {
    month = data.getMonth()
    m = '0' + month
  }
  let time = data.getFullYear() + '-' + m
  pieChartCensusApi(time).then((res) => {
    if (res.code == 0) {
      proportionData.value = res.data
      pieEchartsInit()
    }
  })
}

const maintainTypeProportion = (val: any, type: any) => {
  let data = new Date()
  let month
  let m = ''
  if (val == 1) {
    month = data.getMonth() + 1
    m = '0' + month
  } else if (val == 2) {
    month = data.getMonth()
    m = '0' + month
  }
  let time = data.getFullYear() + '-' + m
  if (type == 2) {
    maintainTypeProportionApi(time).then((res) => {
      if (res.code == 0) {
        maintainTypeData.value = res.data
        pieEchartsInit2()
      }
    })
  } else if (type == 3) {
    checkTypeProportionApi(time).then((res) => {
      if (res.code == 0) {
        maintainTypeData.value = res.data
        pieEchartsInit2()
      }
    })
  }
}

const warningDialog = ref(false)
const openWrarning = () => {
  warningDialog.value = !warningDialog.value
}

onMounted(() => {
  getDevice()
  getPart()
  getUntreatedPart()
  getDeviceFaultCensusByMonth()
  getTableData('time', true)
  getSelectNotRepairList()
  webPageList()
  webPageCheckList()
  pieChartCensus(1)
})
</script>
<style scoped lang="scss">
.home {
  display: flex;

  .home-left {
    width: 70%;

    &__head {
      width: 100%;
      display: flex;

      &__device {
        width: 50%;
        padding: 0 8px 8px 0;

        .deviceTitle {
          padding-left: 4px;
          margin-bottom: 16px;
          line-height: 18px;
          border-left: 4px solid var(--el-color-primary);
        }

        .deviceNum {
          display: flex;

          .deviceNumBox {
            width: 20%;
            text-align: center;

            .boxtop {
              > span {
                font-size: 30px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 38px;
              }
            }

            .boxmsg {
              font-size: var(--el-font-size-base);
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 22px;
              color: rgba(77, 77, 77, 1);
            }
          }
        }
      }

      &__part {
        width: 50%;
        padding: 0 8px 8px 8px;

        .partTitle {
          padding-left: 4px;
          margin-bottom: 16px;
          line-height: 18px;
          border-left: 4px solid var(--el-color-primary);
        }

        .partNum {
          display: flex;

          .partNumBox {
            width: 33%;
            text-align: center;
            .boxtop {
              > span {
                font-size: 30px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 38px;
              }
            }

            .boxmsg {
              font-size: var(--el-font-size-base);
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 22px;
              color: rgba(77, 77, 77, 1);
            }
          }
        }
      }
    }

    &__echarts {
      padding: 8px 8px 8px 0;
    }

    &__table {
      padding: 8px 8px 0 0;

      .tableHead {
        display: flex;
        justify-content: space-between;
        margin-bottom: 11px;
      }
    }
  }

  .home-right {
    width: 30%;

    &__list {
      // height: 552px;
      padding: 0 0 8px 8px;

      .wxTab {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 425px;
        max-height: 425px;
        white-space: nowrap;

        .weixiuList {
          padding: 16px 0;
          border-bottom: 1px solid rgba(242, 242, 242, 1);

          .listTitle {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;

            .titleType {
              background: rgba(2, 173, 130, 0.1);
              padding: 2px 7px;
              border-radius: 4px;
              color: var(--el-color-primary);
            }
          }

          .listNum {
            margin-bottom: 8px;
          }

          .listRow {
            display: flex;
            color: rgba(140, 140, 140, 1);

            > div {
              width: 50%;
              line-height: 25px;
            }
          }

          .listRow2 {
            display: flex;

            > div {
              width: 50%;
              line-height: 25px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }

      .noData {
        font-size: 24px;
        color: rgb(227, 227, 227);
        min-height: 425px;

        > div {
          display: flex;
          justify-content: center;
        }
      }

      .wxTab:hover {
        overflow-x: hidden;
        overflow-y: auto;
      }
    }

    &__pie {
      padding: 8px 0 0 8px;

      .pie-btn {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.home-card-item {
  width: 100%;
  border-radius: 4px;
  transition: all ease 0.3s;
  padding: 20px;
  overflow: hidden;
  background: var(--el-color-white);
  color: var(--el-text-color-primary);
  border: 1px solid var(--next-border-color-light);

  &:hover {
    // box-shadow: 0 2px 12px var(--next-color-dark-hover);
    transition: all ease 0.3s;
  }
}

.title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 26px;
  color: rgba(43, 43, 43, 1);
}

.c1 {
  color: rgba(2, 173, 130, 1);
}

.c2 {
  color: rgba(250, 183, 15, 1);
}

.c3 {
  color: rgba(252, 139, 45, 1);
}

.c4 {
  color: rgba(25, 98, 224, 1);
}

.c5 {
  color: rgba(0, 186, 173, 1);
}

.treeLabel {
  width: 100%;
  overflow: hidden; //溢出内容隐藏
  white-space: nowrap; //强制文本在一行显示，不能换行
  text-overflow: ellipsis; //当对象内文本溢出时显示省略标志
}
</style>
<style>
.tool-tip {
  width: 300px;
}
</style>
